<template>
  <div>
    <!--  #####################查询条件###################  -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="商家券名称">
              <a-input v-model="queryParam.productName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="商家券批次号">
              <a-input v-model="queryParam.productNo" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="小程序">
              <a-select v-model="queryParam.customerId" allowClear @change="handleProvinceChange">
                <a-select-option v-for="item in editProps" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="所属门店">
              <a-select showSearch optionFilterProp="children" v-model="storeCode" :filterOption="filterOption"
                        allowClear>
                <a-select-option v-for="item in customers" :key="item.code">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons"
                  :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="clearData()">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--  #####################查询条件###################  -->

    <!--  #####################操作###################  -->
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleEdit('null')">新建</a-button>
      <span style="font-size:16px; color:red;">本页面做了缓存，新增或者编辑之后请查询一次</span>
    </div>
    <!--  #####################操作###################  -->

    <!--  #####################表格###################  -->
    <s-table ref="table" :columns="columns" :data="loadData">
      <span slot="fileUrl" slot-scope="text, record">
        <img :src="text" alt="" style="max-width: 150px">
      </span>
      <span slot="stockName" slot-scope="text, record">
          <a @click="handleOrder(record)">{{text}}</a>
        </span>
      <a-tag slot="status" slot-scope="text" :color="text | statusColorFilter">
        {{text | statusFilter}}
      </a-tag>
      <a-tag slot="type" slot-scope="text, record" :color="text | typeColorFilter">
        {{text | typeFilter}}
      </a-tag>
      <span slot="status" slot-scope="status,record">
          <a-switch checked-children="启用" un-checked-children="禁用" :checked="status" @change="statusBtn(record.id)" :loading="loading"/>
        </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:edit @click="handleEdit(record)">编辑</a>
          <a-divider v-action:edit type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多<a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
<!--              <a-menu-item v-action:query>-->
<!--                <a v-action:edit @click="updateStatus(record.id)"> {{record.status == 1 ? '上架':'下架'}}</a>-->
<!--              </a-menu-item>-->
              <a-menu-item v-action:query>
                <a v-action:edit @click="handlePic(record)">明细图配置</a>
              </a-menu-item>
              <a-menu-item v-action:query>
                <a v-action:delete @click="handleDel(record)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </span>
    </s-table>
    <!--  #####################表格###################  -->

    <!--  #####################打开的页面###################  -->

    <!--  #####################打开的页面###################  -->
  </div>
</template>

<script>
  import { STable } from '@/components'
  //import { selectAllStore } from '@/api/shop/store'
  import {optionselect} from '@/api/mini/pic'
  import { selectPage, storeList, del, statusBtn } from '@/api/product/aliCoupon'
  //import { selectAllCustomer } from '@/api/shop/customer'

  /**
   * 组件
   */
  const components = { STable }

  const columns = [
    {
      title: '图片',
      dataIndex: 'fileUrl',
      scopedSlots: { customRender: 'fileUrl' },
      width: 150
    },
    {
      title: '商家券批次号',
      dataIndex: 'productNo',
      width: 160,
      ellipsis: true
    },
    {
      title: '商家券名称',
      dataIndex: 'productName',
      scopedSlots: { customRender: 'productName' },
      width: 280,
      ellipsis: true
    },
    {
      title: '开始时间',
      dataIndex: 'availableBeginTime',
      ellipsis: true
    },
    {
      title: '结束时间',
      dataIndex: 'availableEndTime',
      ellipsis: true
    },
    {
      title: '发放总量',
      dataIndex: 'maxCoupons',
      width: 70
    },
    {
      title: '已发数量',
      dataIndex: 'distributedCoupons',
      width: 70
    },
    {
      title: '限领张数',
      dataIndex: 'maxCouponsPerUser',
      width: 70
    },
    {
      title: '排序',
      dataIndex: 'sortNo',
      width: 60
    },
    {
      title: '上架状态',
      dataIndex: 'status',
      width: 100,
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 150,
      scopedSlots: {
        customRender: 'action'
      }
    }
  ]

  const typeMap = {
    1: {
      status: '',
      text: '免费代金券'
    },
    2: {
      status: '#87d068',
      text: '收费代金券'
    },
    3: {
      status: '#2db7f5',
      text: '积分代金券'
    },
    4: {
      status: '#F577C2',
      text: '谢谢惠顾券'
    },
    5: {
      status: '#2728f5',
      text: '预约商品'
    }
  }
  const statusMap = {
    1: {
      status: '#f50',
      text: '下架'
    },
    2: {
      status: '#108ee9',
      text: '上架'
    }
  }

  /**
   * 数据
   */
  const data = function() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      loading: false,
      editProps: [],
      customers: [],
      storeCode:null,

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        //this.queryParam.stockType = 'merNORMAL'
        this.queryParam.types = 5
        // return  false;
        return selectPage(Object.assign(parameter, this.queryParam , {storeCode: this.storeCode})).then(res => {
          return res.data
        })
      }
    }
  }

  const created = function() {
    optionselect().then(res => {
      if (res.code === 200) {
        this.editProps = res.data
      }
    })
    storeList().then(res => {
      if (res.code === 200) {
        this.customers = res.data
      }
    })
  }

  /**
   * 过滤器
   */
  const filters = {
    statusFilter(status) {
      return statusMap[status].text
    },
    statusColorFilter(status) {
      return statusMap[status].status
    },
    typeFilter(type) {
      return typeMap[type].text
    },
    typeColorFilter(type) {
      return typeMap[type].status
    }
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    name: 'merCouponList',
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    watch: watch,
    /**
     * 方法
     */
    methods: {
      //联动选择商户
      handleProvinceChange (value) {
        this.storeCode = ''
        const params = { 'merchantCode': value }
        optionselect(params).then(res => {
          if (res.code === 200) {
            this.editProps = res.data
          }
        })
      },
      handleEdit(record) {
        this.$emit('onEdit', record)
      },
      handleOrder(record) {
        this.$router.push({ name: 'couponOrderInfo', params: {stockId: record.stockId, stockType: record.stockType} })
      },
      handlePic(record) {
        this.$router.push({ path: '/product/productDetail', query: {masterId: record.id} })
      },
      updateStatus(id) {
        updateStatus(id).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功！')
            //刷新页面
            this.$refs.table.refresh()
          }
        })
      },
      handleDel(record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.stockName} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.data)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.data)
              }
            })
          }
        })
      },
      handleOk() {
        this.$refs.table.refresh()
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date())
        }
      },
      statusBtn(id) {
        const that = this
        that.loading = true
        statusBtn(id).then(res => {
          that.loading = false
          if (res.code === 200) {
            that.$refs.table.refresh()
          }
        })
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      clearData(){
        this.queryParam = {};
        this.storeCode = null;
      }
    }
  }
</script>
